<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>表单</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../dist/css/workflow-theme.css">
    <link rel="stylesheet" href="css/division.css">
</head>
<body>
    <section>
        <div class="page-header">
            <p>内联表单<small>样式：form-inline、form-group、form-label、form-control</small></p>
        </div>
        <div class="form-inline">
            <div class="form-group">
                <label for="user" class="form-label">用户名</label>
                <input class="form-control" id="user" placeholder="请输入用户名...">
            </div>
            <div class="form-group">
                <label for="password" class="form-label">密码</label>
                <input class="form-control" id="password" placeholder="请输入密码...">
            </div>
        </div>
    </section>
    <section>
        <div class="page-header">
            <p>内联表单<small>含有进度栏、里程碑</small></p>
        </div>
        <div class="page-header"></div>
        <div class="form-inline">
            <div class="form-group">
                <img src="images/placeholder.jpg">时间完成进度:
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active info" data-value="100" data-valuemin="0" data-valuemax="100"
                        style="width: 100%">
                    </div>
                    <span class="small active">已完成</span>
                </div>
            </div>
            <div class="form-group">
                <img src="images/placeholder.jpg">任务里碑程:
                <ul class="milestone">
                    <li class="milestone-defalut"><input type="hidden" name="milestone" value="None"></li>
                    <li class="milestone-primary"><input type="hidden" name="milestone" value="None"></li>
                    <li class="milestone-success"><input type="hidden" name="milestone" value="None"></li>
                    <li class="milestone-info"><input type="hidden" name="milestone" value="None"></li>
                    <li class="milestone-danger"><input type="hidden" name="milestone" value="None"></li>
                </ul>
                <ul class="milestone">
                </ul>
            </div>
        </div>
    </section>
    <section>
        <div class="page-header">
            <p>表单组的验证状态<small>成功、警告、错误</small></p>
        </div>
        <form>
            <div class="form-group form-success">
                <img src="images/placeholder.jpg" alt="title">
                <label class="form-label" for="title">成功</label>
                <input class="form-control" id="title" type="text" name="Title" placeholder="请填写标题" required="required">
            </div>
            <div class="form-group form-warning">
                <img src="images/placeholder.jpg" alt="title">
                <label class="form-label" for="title">警告</label>
                <input class="form-control" id="title" type="text" name="Title" placeholder="请填写标题" required="required">
            </div>
            <div class="form-group form-error">
                <img src="images/placeholder.jpg" alt="title">
                <label class="form-label" for="title">错误</label>
                <input class="form-control" id="title" type="text" name="Title" placeholder="请填写标题" required="required">
            </div>
        </form>
    </section>
    <section>
        <div class="form-group">
            <div class="form-label">Textarea</div>
            <textarea class="form-control" name="" id="" cols="30" rows="10"></textarea>
        </div>
    </section>
    <section>
        <div class="form-group">
            <label class="form-label">Select</label>
            <select class="form-control"></select>
        </div>
        <div class="row">
            <div class="col-xs-4">
                <div class="form-group">
                    <label class="form-label">6-label</label>
                    <input class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="form-group">
                    <label class="form-label">6-label</label>
                    <input class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="form-group">
                    <label class="form-label">6-label</label>
                    <select class="form-control"></select>
                </div>
            </div>
        </div>
    </section>
</body>
</html>